<template>
  <div class="page-tabs">
    <el-row type="flex" justify="space-between" class="tab-wrapper">
      <el-menu :default-active="tabValue" mode="horizontal" @select="toRouter">
        <el-menu-item v-for="item in tabList" :key="item.uri" v-auth="item.meta" :index="item.uri">{{ item.title }}</el-menu-item>
      </el-menu>
      <el-row type="flex" align="middle" class="tab-secret">
        <!-- 自定义操作按钮 -->
        <div v-for="item in tabSecret" :key="item.key" @click="tabsecret(item)">
          <el-button type="text">{{ item.title }}</el-button>
        </div>
        <slot />
      </el-row>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    tabList: {
      type: Array,
      default() {
        return [];
      }
    },
    tabSecret: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    tabValue() {
      return this.$route.path;
    }
  },
  methods: {
    tabsecret(item) {
      const key = item.key;
      const method = item.method;
      const uri = item.uri;
      this.$http.send(
        method,
        uri,
        {},
        response => {
          if (key == 'read') {
            this.$store.dispatch('message/setAllRead');
            this.$parent.setAllReadDatas();
          }
        },
        _ => {
          this.$message.error('请求出错');
        }
      );
    },
    toRouter(path) {
      let routerPath = path;
      if (this.tabValue === path) {
        routerPath = this.$route.fullPath;
      }

      this.$router.push({ path: routerPath });
    }
  }
};
</script>
<style lang="scss" scoped>
.page-tabs{
  height: 60px;
}
.tab-wrapper {
  position: fixed;
  padding-left: 20px;
  border-bottom: solid 1px#EBEEF5;
  width: calc(100% - 262px);
  background-color: #ffffff;
  z-index: 1000;
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-menu-item {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    margin-right: 20px;
    color: #999;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    color: #333;
  }
  ::v-deep .tab-secret {
    .secret-item {
      cursor: pointer;
      margin-left: 20px;
      font-size: 14px;
      text-decoration: none;
      color: rgba(144, 147, 153, 1);
      .edu-icon-shezhihover,
      .edu-icon-dingdan {
        margin-right: 4px;
      }
    }
  }
}
</style>
